<template>
  <div style="padding: 20px;" class="商品分类">
    <el-select v-model="params.categoryId" placeholder="门店" clearable style="width: 200px;">
      <el-option label="全局分类" value="1"></el-option>
    </el-select>
    <el-button type="primary" class="el-icon-search"> 搜索</el-button>
    <el-button type="success" class="el-icon-plus" @click="add"> 添加</el-button>
    <el-button type="danger" class="el-icon-delete" @click="deleteAll"> 删除所有类目</el-button>
    <div style="height: 550px; overflow-y: auto;">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="编号/名称">
        </el-table-column>
        <el-table-column prop="key" label="编号/类型">
        </el-table-column>
        <el-table-column prop="icon" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.icon" alt="" width="70">
          </template>
        </el-table-column>
        <el-table-column prop="realname" label="图片">
        </el-table-column>
        <el-table-column prop="isUse" label="状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.isUse" type="warning" round size="small">
              {{ scope.isUse | fmtisUse }}</el-button>
            <el-button v-else type="success" plain size="small">
              {{ scope.isUse | fmtisUse }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">{{ scope.row.date }}
            <span style="color: #409eff;margin-right: 5px;" @click="add">编辑</span>
            <span style="color: #ff0000;" @click="deleteAll(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button type="danger" @click="deleteAll">批量删除</el-button>
  </div>
</template>
<script>
import { tableList } from "@/api/commodityManage";
export default {
  data() {
    return {
      params:{
        categoryId: "",
      },
      tableData: [
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      delete: []
    }
  },
  async mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      let { data: res } = await tableList(this.params)
      console.log(res);
      this.total = res.totalRow
      this.tableData = res
    },
    handleSelectionChange(val) {
      this.delete = val
    },
    deleteAll() {
      this.$confirm('删除无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.delete);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    disable(row) {
      this.$confirm('确定要禁用吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁用'
        });
      });
    },

    add() {
      this.$router.push("/CategoryListAdd")
    }

  },
  filters: {
    fmtisUse(val) {
      if (val) return '禁用'
      else return "正常"
    }
  },
}
</script>
